<template>
	<div>
		<div @click.stop="$parent.$parent.onEditer(index)">
			<div class="drag optional" :class="{ selected: index === selectedIndex }"
				:style="{ background: item.style.bgcolor, paddingLeft: item.style.paddingLeft + 'px', paddingRight: item.style.paddingLeft + 'px', paddingTop: item.style.paddingTop + 'px', paddingBottom: item.style.paddingBottom + 'px' }">
				<div class="diy-notice"
					:style="{ background: item.style.background, borderTopLeftRadius: item.style.topRadio + 'px', borderTopRightRadius: item.style.topRadio + 'px', borderBottomLeftRadius: item.style.bottomRadio + 'px', borderBottomRightRadius: item.style.bottomRadio + 'px', padding: '0 ' + item.style.padding + 'px' }">
					<div class="notice-icon"><img v-img-url="item.params.icon" /></div>
					<div class="notice-text flex-1 text-ellipsis">
						<span :style="{ color: item.style.textColor }">{{ item.params.text }}</span>
					</div>
				</div>
				<div class="btn-edit-del">
					<div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">{{ $t('page.delete') }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: ['item', 'index', 'selectedIndex'],
	methods: {}
};
</script>

<style lang="scss" scoped>
.diy-notice {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.diy-notice .notice-icon {
	width: 32px;
	height: 32px;
	img{
		width: 100%;
		height: 100%;
	}
}

.diy-notice .notice-text {
	margin-left: 10px;
	overflow: hidden;
	white-space: nowrap;
}
</style>
